<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>智能洗护中心 - 首页</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#35C2C1',
                        secondary: '#FF7D00',
                        dark: '#333333',
                        light: '#F5F5F5',
                        gray: '#999999',
                        lightgray: '#EEEEEE'
                    },
                    fontFamily: {
                        sans: ['PingFang SC', 'Helvetica Neue', 'Arial', 'sans-serif']
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .nav-active {
                color: #35C2C1;
            }
            .card-shadow {
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .service-icon {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                background-color: rgba(53, 194, 193, 0.1);
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .robot-status {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                display: inline-block;
            }
            .status-available {
                background-color: #4CAF50;
            }
            .status-busy {
                background-color: #F44336;
            }
        }
    </style>
</head>
<body class="bg-light font-sans text-dark min-h-screen">
    <!-- 小程序容器 -->
    <div class="max-w-md mx-auto bg-white min-h-screen relative">
        <!-- 顶部导航栏 -->
        <header class="bg-white text-dark py-4 px-5 fixed top-0 left-0 right-0 max-w-md mx-auto z-10">
            <div class="flex justify-between items-center">
                <div class="text-xl font-bold text-primary">智能洗护中心</div>
                <div class="flex space-x-4">
                    <i class="fa fa-search text-lg"></i>
                    <i class="fa fa-bell-o text-lg"></i>
                </div>
            </div>
        </header>

        <!-- 主内容区 -->
        <main class="pt-16 pb-20">
            <!-- 轮播图 -->
            <div class="relative h-48 overflow-hidden">
                <img src="https://picsum.photos/800/500?random=1" alt="智能洗护中心宣传图" class="w-full h-full object-cover">
                <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-4">
                    <h2 class="text-white font-bold text-lg">全新AI洗头体验</h2>
                    <p class="text-white/90 text-sm">智能科技，专业呵护您的秀发</p>
                </div>
                <div class="absolute bottom-3 right-3 flex space-x-1">
                    <span class="w-2 h-2 rounded-full bg-white"></span>
                    <span class="w-2 h-2 rounded-full bg-white/50"></span>
                    <span class="w-2 h-2 rounded-full bg-white/50"></span>
                </div>
            </div>

         

            <!-- 附近门店 -->
            <div class="bg-white mt-2 p-4">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-lg font-bold">附近门店</h2>
                    <a href="#" class="text-primary text-sm">更多门店</a>
                </div>
                
                <div class="space-y-4">
                    <!-- 门店1 -->
                    <a href="store-detail-optimized.html" class="block">
                        <div class="flex">
                            <img src="https://picsum.photos/120/120?random=10" alt="智能洗护中心北京路店" class="w-24 h-24 rounded-lg object-cover">
                            <div class="ml-3 flex-1">
                                <h3 class="font-medium">智能洗护中心(北京路店)</h3>
                                <div class="flex items-center mt-1">
                                    <div class="flex items-center text-yellow-400 text-xs">
                                        <i class="fa fa-star"></i>
                                        <span class="ml-1 text-dark">4.8</span>
                                    </div>
                                    <span class="mx-1 text-lightgray text-xs">|</span>
                                    <span class="text-gray text-xs">238条评价</span>
                                </div>
                                <p class="text-gray text-xs mt-1 flex items-center">
                                    <i class="fa fa-map-marker mr-1"></i>
                                    距离2.3km · 越秀区北京路123号
                                </p>
                                <div class="flex items-center mt-1 text-xs">
                                    <span class="text-gray mr-2">机器人状态:</span>
                                    <span class="flex items-center mr-2">
                                        <span class="robot-status status-available mr-1"></span>
                                        <span>3台可用</span>
                                    </span>
                                    <span class="flex items-center">
                                        <span class="robot-status status-busy mr-1"></span>
                                        <span>2台忙碌</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </a>
                    
                    <!-- 门店2 -->
                    <a href="#" class="block">
                        <div class="flex">
                            <img src="https://picsum.photos/120/120?random=11" alt="智能洗护中心天河城店" class="w-24 h-24 rounded-lg object-cover">
                            <div class="ml-3 flex-1">
                                <h3 class="font-medium">智能洗护中心(天河城店)</h3>
                                <div class="flex items-center mt-1">
                                    <div class="flex items-center text-yellow-400 text-xs">
                                        <i class="fa fa-star"></i>
                                        <span class="ml-1 text-dark">4.7</span>
                                    </div>
                                    <span class="mx-1 text-lightgray text-xs">|</span>
                                    <span class="text-gray text-xs">186条评价</span>
                                </div>
                                <p class="text-gray text-xs mt-1 flex items-center">
                                    <i class="fa fa-map-marker mr-1"></i>
                                    距离3.5km · 天河区天河路208号
                                </p>
                                <div class="flex items-center mt-1 text-xs">
                                    <span class="text-gray mr-2">机器人状态:</span>
                                    <span class="flex items-center mr-2">
                                        <span class="robot-status status-available mr-1"></span>
                                        <span>2台可用</span>
                                    </span>
                                    <span class="flex items-center">
                                        <span class="robot-status status-busy mr-1"></span>
                                        <span>3台忙碌</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>

        
        </main>

        <!-- 底部导航 -->
        <footer class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white border-t border-lightgray py-2 px-8">
            <div class="flex justify-between">
                <a href="#" class="flex flex-col items-center nav-active">
                    <i class="fa fa-home text-lg"></i>
                    <span class="text-xs mt-1">首页</span>
                </a>
                <a href="#" class="flex flex-col items-center text-gray">
                    <i class="fa fa-map-marker text-lg"></i>
                    <span class="text-xs mt-1">门店</span>
                </a>
                <a href="#" class="flex flex-col items-center text-gray">
                    <i class="fa fa-calendar text-lg"></i>
                    <span class="text-xs mt-1">预约</span>
                </a>
                <a href="#" class="flex flex-col items-center text-gray">
                    <i class="fa fa-user text-lg"></i>
                    <span class="text-xs mt-1">我的</span>
                </a>
            </div>
        </footer>
    </div>

    <script>
        // 简单的轮播图功能
        let currentSlide = 0;
        const slides = [
            "https://picsum.photos/800/500?random=1",
            "https://picsum.photos/800/500?random=2",
            "https://picsum.photos/800/500?random=3"
        ];
        const slideCaptions = [
            { title: "全新AI洗头体验", subtitle: "智能科技，专业呵护您的秀发" },
            { title: "会员专享优惠", subtitle: "充值即送等值护理服务" },
            { title: "新用户福利", subtitle: "首次体验仅需19.9元" }
        ];
        
        // 轮播图自动切换
        function nextSlide() {
            currentSlide = (currentSlide + 1) % slides.length;
            updateSlide();
        }
        
        function updateSlide() {
            const slideImg = document.querySelector('.relative.h-48 img');
            const slideTitle = document.querySelector('.absolute.bottom-0 h2');
            const slideSubtitle = document.querySelector('.absolute.bottom-0 p');
            const slideDots = document.querySelectorAll('.absolute.bottom-3.right-3 span');
            
            slideImg.src = slides[currentSlide];
            slideTitle.textContent = slideCaptions[currentSlide].title;
            slideSubtitle.textContent = slideCaptions[currentSlide].subtitle;
            
            // 更新指示点
            slideDots.forEach((dot, index) => {
                if (index === currentSlide) {
                    dot.classList.add('bg-white');
                    dot.classList.remove('bg-white/50');
                } else {
                    dot.classList.remove('bg-white');
                    dot.classList.add('bg-white/50');
                }
            });
        }
        
        // 每5秒切换一次轮播图
        setInterval(nextSlide, 5000);
        
        // 底部导航交互
        document.querySelectorAll('footer a').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                document.querySelectorAll('footer a').forEach(el => {
                    el.classList.remove('nav-active');
                    el.classList.add('text-gray');
                });
                this.classList.add('nav-active');
                this.classList.remove('text-gray');
            });
        });
    </script>
</body>
</html>
    